<!-- 商户申请审核 -->
<template>
  <div class="app-container h-100%">
    <!-- <div class="search-bar">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="入驻类型" prop="userType">
          <el-select
            v-model="queryParams.userType"
            placeholder="请选择"
            clearable
            style="width: 240px"
          >
            <el-option
              v-for="dict in SETTLE_TYPE_LIST"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="initList">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="virtual-account-container">
      <base-page-table
        class="h-100%"
        :table-data="tableData"
        :table-columns-data="tableColumnsData"
        :loading="loading"
        :page-num="queryParams.pageNum"
        :page-size="queryParams.pageSize"
        :total="queryParams.total"
        @handleQuery="handleQuery"
      >
        <template #roleName="scope">
          <el-tag type="primary" class="margin-r-10">
            {{ scope.row.roleName ?? "未设置" }}
          </el-tag>
        </template>
        <template #adminFlag="scope">
          <el-tag type="success" v-if="scope.row.adminFlag == 1">是</el-tag>
          <el-tag type="info" v-if="scope.row.adminFlag == 0">否</el-tag>
        </template>
        <template #status="scope">
          <el-tag type="success" class="margin-r-10" v-if="scope.row.status == 1">通过</el-tag>
          <el-tag type="danger" class="margin-r-10" v-if="scope.row.status == 2">驳回</el-tag>
          <el-tag type="warning" v-if="scope.row.status == 0">未审核</el-tag>
        </template>
        <template #handle="scope">
          <el-button
            link
            size="small"
            icon="connection"
            :type="scope.row.employeeName ? 'danger' : 'success'"
            @click="bindOrUnbind(scope.row)"
          >
            {{ scope.row.employeeName ? "解绑" : "绑定" }}员工
          </el-button>
          <!-- <el-button link size="small" icon="user" @click="clickConfigButton(scope.row)">
            设置主账号
          </el-button> -->
          <el-button link type="primary" size="small" icon="edit" @click="editRoleFunc(scope.row)">
            编辑
          </el-button>
        </template>
      </base-page-table>
    </div>

    <AddBindEmploee
      v-model="roleDialogVisible"
      :default-row-id="defaultRow?.id"
      @handleBindSubmit="handleBindSubmit"
    />
    <EditRole v-model="editDialogVisible" :default-row="defaultRow" @handleEditSuccess="initList" />
    <ConfigAdmin v-model="configAdminVisible" :default-row-id="defaultRow?.id" />
  </div>
</template>
<script setup>
import AddBindEmploee from "./AddBindEmploee.vue";
import ConfigAdmin from "./ConfigAdmin.vue";
import EditRole from "./EditRole.vue";
import { getMerchantApplyList, auditMerchantApply } from "@/api/apply/index";
import TermAPI from "@/api/term/index";
import { MERCHANT_APPLY_AUDIT_STATUS_WORD } from "@/utils/enums/merchant";
import { SETTLE_TYPE_LIST, SETTLE_TYPE_OBJECT } from "@/utils/enums/system";
import { ref } from "vue";
console.log(MERCHANT_APPLY_AUDIT_STATUS_WORD);
/**
 *
 * 弹框展示
 */
const roleDialogVisible = ref(false); // 绑定员工弹框
const editDialogVisible = ref(false); // 修改角色弹框
const configAdminVisible = ref(false); // 设置主账号弹框
const queryParams = reactive({
  userType: "",
  pageNum: 1,
  pageSize: 10,
  total: 0,
});
const defaultRow = ref(null);
const queryFormRef = ref();
const tableData = ref([
  {
    nickname: "张三",
    type: "个人",
    phonenumber: "13800138000",
    status: 1,
  },
  {
    nickname: "李四",
    type: "企业",
    phonphonenumbereNumber: "13800138001",
    status: 0,
  },
]);
const tableColumnsData = ref([
  {
    label: "子账户名称",
    prop: "virtualName",
    align: "center",
    width: 150,
    showOverflowTooltip: true,
  },
  {
    label: "角色名称",
    prop: "roleName",
    customSlot: "roleName",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "员工",
    prop: "employeeName",
    align: "center",
    width: 150,
    showOverflowTooltip: true,
  },
  {
    label: "是否是管理员",
    prop: "adminFlag",
    align: "center",
    customSlot: "adminFlag",
    showOverflowTooltip: true,
  },

  {
    label: "操作",
    prop: "handle",
    align: "center",
    customSlot: "handle",
    width: 300,
    showOverflowTooltip: true,
  },
]);
const handleAudit = (row, status) => {
  console.log(row, status);
  funcAuditMerchantApply({
    id: row.id,
    status: status,
  });
};
/**
 * 请求相关
 *
 */
//获取入驻申请列表
const loading = ref(false);
const funcGetMerchantApplyList = async () => {
  try {
    loading.value = true;
    const res = await TermAPI.getVirtualPage({
      pageNum: queryParams.pageNum,
      pageSize: queryParams.pageSize,
      // userType: queryParams.userType,
    });
    tableData.value = res.list;
    queryParams.total = res.total;
    // 刷新列表
  } catch (err) {
    console.log(err);
  } finally {
    loading.value = false;
  }
};
//审核入驻申请
const funcAuditMerchantApply = async (params) => {
  try {
    console.log(params, "params", params);
    const res = await auditMerchantApply(params);
    funcGetMerchantApplyList();
    // 刷新列表
    console.log(res);
  } catch (err) {
    console.log(err);
  } finally {
  }
};
// 绑定员工或者接绑员工
const handleBindSubmit = async (params) => {
  try {
    const data = await TermAPI.virtualBindingEmployee(params);
    console.log(data);
    roleDialogVisible.value = false;
    defaultRow.value = null;
    initList();
  } catch (err) {
    console.log(err);
  }
};
const bindOrUnbind = (row) => {
  console.log(row, "row");
  if (row.employeeId) {
    // 解绑
    ElMessageBox.alert("确定解绑员工吗？", {
      type: "warning",
    }).then(() => {
      handleBindSubmit({
        id: row.id,
        employeeId: row.employeeId,
        bindingType: 2,
        mobile: row.mobile,
      });
    });
  } else {
    // 绑定
    roleDialogVisible.value = true;
    defaultRow.value = row;
  }
};
/**
 * 修改角色
 *
 */
const editRoleFunc = async (row) => {
  console.log(row, "row");
  defaultRow.value = row;

  editDialogVisible.value = true;
};
/**
 * 设置主账号
 */
const clickConfigButton = (row) => {
  console.log(row, "row");
  defaultRow.value = row;
  configAdminVisible.value = true;
};
function handleQuery(val) {
  queryParams.pageNum = val.pageNum;
  queryParams.pageSize = val.pageSize;
  funcGetMerchantApplyList();
}
function initList() {
  defaultRow.value = null;
  queryParams.pageNum = 1;
  funcGetMerchantApplyList();
}
onMounted(() => {
  funcGetMerchantApplyList();
});
</script>
<style lang="scss" scoped>
.virtual-account-container {
  height: 100%;
  background-color: #fff;
  padding: 20px;
}
</style>
